﻿
@{
    ViewBag.Title = "Index";
}

<h2>车辆显示</h2>
<h3>欢迎{{userName}}</h3>

<script src="~/Scripts/axios.min.js"></script>
<script src="~/Scripts/vue.min.js"></script>

<!--页面模板区域(View)-->
<div id="showCar">
    <!--查询表单-->
    <form>
        <table>
            <tr>
                <td><label>厂牌型号：</label><input id="carType" type="text" v-model="formData.carType" /></td>
                <td><label>车牌号：</label><input id="carNumber" type="text" v-model="formData.carNumber" /></td>
            </tr>
            <tr>
                <td><label>司机名：</label><input id="driverName" type="text" v-model="formData.driverName" /></td>
                <td><label>所属公司：</label><input id="driverCompany" type="text" v-model="formData.driverCompany" /></td>
            </tr>
            <tr>
                <td><label>购置时间：</label><input id="driverName" type="date" v-model="formData.buyDate" /></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td><input id="btnSubmit" type="button" value="查询" v-on:click="query()" /></td>
                <td><input id="btnRest" type="reset" value="重置" /></td>
            </tr>
        </table>
    </form>

    <!--显示数据-->
    <table>

    </table>
</div>

<!--页面的功能区域-->
<script>
    //定义一个Vue的实例
    var app = new Vue({
        el: '#showCar',  //关联的元素（element）
        data: {    //定义数据模型对象(Model)
            formQuery: {
                carType: '',  //车辆型号
                carNumber: '', //车牌号
                driverName: '',//司机名
                driverCompany: '',//司机所属公司
                buyDate: '',

                pageIndex: 1,
                pageSize:10
            },

            tableList: [],   //要显示的表格数据

            userName:''
        },
        computed: {  //计算属性
            //计算属性，是根据data里面的原始属性来计算出来的新的值
            //计算属性的好处：就在于对计算结果有缓存处理，可以提高数据访问的效率
        },
        methods: {  //定义一些方法
            query() {  //提交事件的处理方法
                //1.调试打印
                console.log(this.formData);

                //调用WebApi进行添加
                axios.get("http://localhost:12345/api/Car/show", { params: this.formQuery})
                    .then((res) => {
                        console.log(res.data);
                       
                        this.tableList = res.data;
                    });
            },
            bindList() {
                //调用webapi加载类型数据

            },
            del() {  //删除功能

            },
            edit() { //修改功能

            }
        },
        created() {  //8大生命周期函数之创建后
            //因为添加页面有可能会用到下拉绑定
            //在此处加载下拉里面的数据
            this.query();

            //绑定下拉
            this.bindList();

            this.userName = window.sessionStorage.getItem('UserName')

        },
        mounted() { 
            this.query();
        },
        beforeCreate() {

        }

    });
</script>
